<template>
  <div class="goods_detail">
    <!-- 头部组件 -->
    <Navbar title="商品详情" />

    <MySwiper :url="url" myHeight="400px" />

    <div class="product-desc">
      <ul>
        <li>
          <span class="product-desc-span">商品标题</span>
        </li>
        <li class="price-li">
          市场价：<s style="margin-right:10px">￥ {{goodsInfo.market_price}}</s>
          销售价：<span style="font-size=18px;color:red;">￥ {{goodsInfo.sell_price}}</span>
        </li>
        <li class="number-li">
          购买数量：
          <span @click="substract">-</span>
          <span>{{pickNum}}</span>
          <span @click="add">+</span>
        </li>
        <li class="shop_cart">
          <mt-button type="primary" size="small">立即购买</mt-button>
          <!-- 给 “加入购物车” 按钮添加点击事件 -->
          <mt-button type="danger" size="small" @click="ballHandler">加入购物车</mt-button>
        </li>
      </ul>
    </div>
    <transition name="ball" @after-enter="afterEnter">
      <div class="ball" v-if="isExist"></div>
    </transition>
    
    <div class="product-props">
      <ul>
        <li>商品参数</li>
        <li>商品货号： {{goodsInfo.goods_no}}</li>
        <li>库存情况： {{goodsInfo.stock_quantity}}件</li>
        <li>上架时间： {{goodsInfo.add_time | converTime('YYYY-MM-DD')}}</li>
      </ul>
    </div>
    <div class="product-info">
      <ul>
        <li>
          <mt-button type="primary" size="large" plain @click="showShopInfo">图文介绍</mt-button>
          <!-- 给 “加入购物车” 按钮添加点击事件 -->
          <mt-button type="primary" size="large" @click="shopComment">商品评论</mt-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
/* 导入 处理购物车 js文件  */
import GoodsTool from "@/GoodsTool.js";

export default {
  name: "goods.detail",
  data() {
    return {
      url: `getthumImages?id=${this.$route.query.id}`,
      goodsInfo: '',
      pickNum: 1,
      isExist: false
    };
  },
  methods: {
    // 加入购物车
    afterEnter(){
      // 让小球隐藏
      this.isExist = false;

      // 触发 bus 对象绑定的事件
      // this.$bus.$emit('sendPickNum', this.pickNum);

      this.$store.dispatch('addShopNumByAction', this.pickNum);
      /* 将添加到购物车的数据保存到本地存储对象中 */
      GoodsTool.add({
        id: this.goodsInfo.id,
        num: this.pickNum
      });
    },
    ballHandler(){
      // 先让小球显示 执行css 动画
      this.isExist = true;
    },
    // 数量 ++
    add(){
      if(this.pickNum < this.goodsInfo.stock_quantity){
        this.pickNum ++;
      }
    },
    // 数量 --
    substract(){
      if(this.pickNum === 1){
        return;
      }
      this.pickNum --;
    },
    shopComment(){
      this.$router.push({
        name: 'goods.comment',
        query: {
          id: this.$route.query.id
        }
      });
    },
    showShopInfo(){
      // 通过动态路由， 进行路由的跳转

      this.$router.push({
        name:"goods.info",
        query: {
          id: this.$route.query.id
        }
      })
    }
  },
  created() {
    /* let id = this.$route.query.id;
    console.log(id); */
    this.$axios.get(`goods/getinfo?id=${this.$route.query.id}`)
      .then(res => {
        // console.log(res);
        this.goodsInfo = res.data;
      })
      .catch(err => {
        console.log("加载子新闻详情失败", err);
      });
  }
};
</script>


/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>
.goods_detail {
  width: 100%;
  margin-bottom: 55px;
  color: #666;
  font-size: 14px;
}

.product-desc li {
  padding: 3px 5px;
}
.product-desc-span {
  color: #e34567;
  font-size: 18px;
}
.number-li span{
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #888;
  border-radius: 5px;
  margin-right: 3px;
  font-weight: bold;
}
.number-li span:nth-child(2){
  width: 30px;
  text-align: center;
}
.shop_cart {
  width: 50%;
  display: flex;
  justify-content: space-around;
}
.ball {
  width: 20px;
  height: 20px;
  background-color: brown;
  border-radius: 50%;
  position: fixed;
}
.ball-enter-active {
  /*给秒的事件让小球进入的动画效果*/
  animation: bounce-in 1s;
}
.ball-leave {
  /* 元素进入以后，透明度，整个动画都是e*/
  /*元素离开默认是1,所以会闪一下,设置为0*/
  opacity: 0;
}
@keyframes bounce-in {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(140px, -50px, 0);
    width: 25px;
    height: 25px;
  }
  75% {
    transform: translate3d(160px, 20px, 0);
    width: 15px;
    height: 15px;
  }
  100% {
    transform: translate3d(260px, 180px, 0);
    width: 10px;
    height: 10px;
  }
}
</style>